<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Create</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
<form class="layui-form layui-form-pane" action="" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">客户分类编码</label>
        <div class="layui-input-inline">
            <input type="hidden" id="iID" name="iID" v-model="iID" />
            <input type="text" id="cCusCCode" name="cCusCCode" required lay-verify="required" placeholder="请输入客户分类编码"
                   class="layui-input" v-model="cCusCCode">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">客户分类名称</label>
        <div class="layui-input-inline">
            <input type="text" id="cCusCName" name="cCusCName" required lay-verify="required" placeholder="请输入客户分类名称"
                   class="layui-input" v-model="cCusCName">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上级客户分类</label>
        <div class="layui-input-inline">
            <input type="hidden" id="iParentID" name="iParentID" v-model="iParentID" />
            <input type="text" id="cParentName" name="cParentName" placeholder="请输入客户分类名称" autocomplete="off"
                   class="layui-input" v-model="cParentName">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script src="/js/vue.min.js"></script>
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery.validate.min.js"></script>
<script src="/layui/layui.all.js"></script>
<script src="/layui/extend/tableSelect.js"></script>

<script>
    var data=${data};

    var vv=new Vue ({
        el:".layui-form",
        data:data
    });

    var form = layui.form;
    form.render();

    //开始使用
    var tableSelect = layui.tableSelect;
    tableSelect.render({
        elem: '#cParentName',	//定义输入框input对象 必填
        checkedKey: 'iID', //表格的唯一建值，非常重要，影响到选中状态 必填
        searchKey: 'cCusCName',	//搜索输入框的name值 默认keyword
        searchPlaceholder: '按客户分类名称搜索',	//搜索输入框的提示文字 默认关键词搜索
        table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
            url: '/customerClass/getListWithPage',
            cols: [[
                { type: 'radio' }
                , { field: 'iID', width: 80, title: 'ID', sort: true }
                , { field: 'cCusCCode', width: 150, title: '客户分类编码' }
                , { field: 'cCusCName', width: 150, title: '客户分类名称', sort: true }
            ]],
            page: true,
            limit: 10
        },
        done: function (elem, data) {
            //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
            //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
            //console.log(data);
            var NEWJSON = [];
            layui.each(data.data, function (index, item) {
                //NEWJSON.push(item.cParentName)
                $('#iParentID').val(item.iID);
                $('#cParentName').val(item.cDepName);
            });
            //elem.val(NEWJSON.join(","));
        }
    });
    //默认值 只需要在触发input上添加 ts - selected="1,2,3" 属性即可 值需与checkedKey对应

    //监听提交
    form.on('submit(formDemo)', function (data) {
        //console.log(data);

        $.ajax({
            type: "POST",
            data: data.field,
            dataTypeString: "json",
            async: false,
            url: "/customerClass/update",
            success: function (msg) {
                if (msg.code == "0") {
                    //当你在iframe页面关闭自身时
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                }
            }
        });
        //console.log(data);
        return false;
    });
</script>

</body>
</html>
